<template>
  <el-form
    :model="ruleForm"
    ref="ruleForm"
    :rules="rules"
  >
    <el-form-item prop="phone">
      <el-input
        v-model="ruleForm.phone"
        prefix-icon="el-icon-user"
        placeholder='请输入手机号'
		 @keypress.native.enter="submitForm('ruleForm')"
      ></el-input>
    </el-form-item>

    <el-form-item prop="code">
      <el-input
        v-model="ruleForm.code"
        prefix-icon="el-icon-lock"
        placeholder='请输入验证码'
		 @keypress.native.enter="submitForm('ruleForm')"
      >
        <template slot="append">
          <div @click="handleSendCode">
            {{lastTimeContent}}
          </div>
        </template>
      </el-input>
    </el-form-item>

    <el-form-item>
      <p
        class="phone-form-btn"
        @click="submitForm('ruleForm')"
      >登 录</p>
      <div style="width: 100%">
        <el-checkbox v-model="checked" style="float: left;margin-top: -2px">登录即代表您已阅读并同意该</el-checkbox>
        <a @click="seeShare"  style="float: right;margin-left: -1px;font-size: 13px;font-weight: bolder;margin-top: -3px"><span>《用户协议》</span></a>
        <!--        <router-link :to="{name:'xieyi-detail'}">《用户协议》</router-link>-->
      </div>
    </el-form-item>
  </el-form>
</template>

<script>
import { deleteAction, postAction, getAction } from '@/api/manage'
import Qs from "qs";

export default {
  data() {
    return {
      checked: false,
      lastTimeContent: "发送验证码",
      ruleForm: {
        phone: "",
        code: "",
      },
      url: {
        sendcode: '/user/interface/getCaptcha',
        phone_login: '/user/interface/phone_login'
      },
      rules: {
        phone: [
                { required: true, message: "请输入手机号", trigger: "blur" }
        ],
        code: [
          { required: true, message: "请输入手机验证码", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    seeShare(){
      localStorage.setItem("token", "123456");
      let routeUrl = this.$router.resolve({
        path: "/xieyi-detail",query: {id:6}
      });
      //let routeUrl = this.$router.resolve(`/share/${96}`)
      window.open(routeUrl.href, '_blank');
    },
    async handleSendCode() {
      if (this.ruleForm.phone) {
        if (!/^1[3456789]\d{9}$/.test(this.ruleForm.phone)) {
          this.$message.warning("请输入正确的手机号")
          return;
        }
        if (this.lastTimeContent === "发送验证码") {
          var params = {phone:this.ruleForm.phone};
          postAction(domain.publicUrl+this.url.sendcode,Qs.stringify(params)).then(res=>{
            var result = res.data;
            if(result.code==0){
              this.$message.success(result.msg)
              // this.$notify.success({
              //   title: "成功",
              //   message: result.msg,
              //   duration: 2000,
              // });
              let lastTime = 59;
              let timer = setInterval(() => {
                if (lastTime > 0) {
                  this.lastTimeContent = lastTime + "s";
                  lastTime--;
                } else {
                  window.clearInterval(timer);
                  this.lastTimeContent = "发送验证码";
                }
              }, 1000);
            }else{
              this.$message.error(result.msg)
              // this.$notify.error({
              //   title: "错误",
              //   message: result.msg,
              //   duration: 2000,
              // });
            }
          })
        } else {
          this.$message.warning("请不要频繁点击")
          // this.$notify.warning({
          //   title: "错误",
          //   message: "请不要频繁点击",
          //   duration: 1000,
          // });
        }
      } else {
        this.$message.warning("请输入手机号码")
        // this.$notify.error({
        //   title: "错误",
        //   message: "请输入手机号码！",
        //   duration: 1000,
        // });
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if(this.checked==false){
            this.$message.warning("请先勾选用户协议")
            // this.$notify.error({
            //   title: "提示",
            //   message: "请先勾选用户协议",
            //   duration: 1000,
            // });
            return;
          }
          if (true) {
            // delete this.ruleForm.code;
            var params = {phone:this.ruleForm.phone,code:this.ruleForm.code};
            postAction(domain.publicUrl+this.url.phone_login,Qs.stringify(params)).then(res=>{
              var result = res.data;
              console.log(result)
              if(result.code==0){
                this.$message.success(result.msg)
                localStorage.setItem("token", result.data.token);
                this.$router.replace({
                  path:'/',
                  name:'home'
                })
                localStorage.setItem("islogin", "1");
              }else{
                // this.$notify.error({
                //   title: "错误",
                //   message: result.msg,
                //   duration: 1000,
                // });
                this.$message.error(result.msg)
              }
            })
          } else {
            this.$message.error("验证码错误")
            // this.$notify.error({
            //   title: "错误",
            //   message: "验证码错误！",
            //   duration: 1000,
            // });
            this.getYZM(4);
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.phone-form-btn {
  width: 100%;
  height: 40px;
  text-align: center;
  background: #f9d532;
  border: 0;
  color: #393939;
  font-weight: 600;
  cursor: pointer;
}
</style>
